<template>
  <page-layout title="用户列表">

    <template #search>
      <a-form layout="inline">
        <a-form-item label="姓名">
          <a-input placeholder="请输入的姓名" allow-clear />
        </a-form-item>
        <a-form-item label="性别">
          <a-input placeholder="请输入性别" allow-clear />
        </a-form-item>
      </a-form>
    </template>

    <template #operate>
      <a-button type="primary">新建</a-button>
      <a-button>批量</a-button>
    </template>

    <div>
      <a-table
        :columns="columns"
        :row-key="bindRowKey"
        :data="tableData"
        :pagination="pagination"
        :loading="loading"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
        @change="handleDataChange"
      >
        <template #action="{ record }">
          <a-button type="text" @click="edit(record)">编辑</a-button>
          <a-popconfirm content="确定删除吗？" @ok="deleteRecord(record.id)">
            <a-button type="text" status="danger">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
  </page-layout>
</template>

<script setup>
import { onMounted, reactive, toRefs } from 'vue'
import getSearchMixin from '@/mixins/searchMixin'
import { randomString } from '@/utils/tools'

// search table mixins
const {
  loading,
  queryParam,
  pagination,
  handlePageChange,
  handlePageSizeChange,
  handleDataChange,
  bindSearch,
  resetSearch
} = getSearchMixin(loadData)
const state = reactive({
  columns: [
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '电话',
      dataIndex: 'tel'
    },
    {
      title: '状态',
      dataIndex: 'status'
    },
    {
      title: '角色',
      dataIndex: 'role'
    },
    {
      title: '操作人',
      dataIndex: 'operator'
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime'
    },
    {
      title: '操作',
      slotName: 'action'
    },
  ],
  tableData: []
})
const { columns, tableData } = toRefs(state)

/**
 * 加载数据 callback
 */
function loadData() {
  const { current, pageSize } = pagination
  const pagr = {
    ...queryParam.value,
    pageNo: current,
    pageSize
  }
  console.log(pagr)

  loading.value = true

  let dataSource = []
  for (let index = 0; index < 10; index++) {
    dataSource.push({
      id: 'id---' + index,
      name: 'user__' + randomString(),
      tel: '1351234567' + index,
      status: '启用',
      role: '管理员',
      operator: 'admin',
      updateTime: '2023-01-01 00:00:00',
    })
  }

  setTimeout(() => {
    loading.value = false
  }, 1000)

  pagination.total = 100
  state.tableData = dataSource
}

const edit = (record) => {
  console.log(record)
}

const deleteRecord = (id) => {
  console.log(id)
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped></style>
